<template>
   <el-menu
    background-color="#304156"
    text-color="#fff"
    :unique-opened="true"
    active-text-color="#ff0"
    :router="true"
    :collapse="isCollapse"
    :collapse-transition="false"
    :default-active="activeMenu()">
      <aside-menu-item v-for="(item,index) in menus" :key="index" :item="item"></aside-menu-item>
   </el-menu>
</template>

<script>
import AsideMenuItem from '@/components/AsideMenuItem.vue'
import {createNamespacedHelpers} from 'vuex'
const {mapState,mapMutations}=createNamespacedHelpers('menus')
export default {
  components: { AsideMenuItem },
    computed:{
        ...mapState(['menus','isCollapse','activePath'])
    },
    created(){
        console.log(this.menus);
    },
    methods:{
        ...mapMutations(['SET_ACTIVE_PATH']),
        activeMenu(){
            if(this.$route.path=="/"){
                this.$router.push(this.activePath)
                return this.activePath
            }else{
                this.SET_ACTIVE_PATH(this.$route.path)
            }
            return this.$route.path
        }
    }
}
</script>

<style>
    .el-menu{
        border-right: none;
    }
</style>